<template>
  <div style="display: flex;flex-direction: column;background: white;padding-top: 15px;padding-bottom: 10px">
    <div style="display: flex;flex-direction: row;margin-left: 8px;margin-right: 8px;margin-bottom: 8px">
      <div style="display: flex;flex-direction: column;flex: 1;text-align: center;text-align: center"
           v-for="(feature,index) in features">
        <img :src='[feature.icon]' style="width: 2rem;height: 2rem;display:block; margin:auto;"/>
        <span v-if="feature.feature!=undefined"
          style="color: #42578E;font-size: 13px;max-width: 70px;display: block;margin: auto;margin-top: 5px">{{feature.feature}}</span>
        <span v-if="feature.subTitle!=undefined"
          style="color: #8A919C;font-size: 13px;max-width: 90px;display: block;margin: auto;margin-top: 5px">{{feature.subTitle}}</span>
      </div>
    </div>
    <div class="description" v-if="description!=undefined">
      {{description}}<span style="color: #42578E">查看详情</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    props: ['features', 'description', 'viewMoreUrl'],
    data () {
      return {}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .description {
    display: inline;
    color: #8A919C;
    font-size: 12px;
    margin-left: 15px;
    padding-top: 5px;
  }

  .description::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    top: -8px;
    /*background: red;*/
    position: relative;
  }
</style>
